<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Widgets in JavaScript GTK</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="GUI, GTK, Widgets, JavaScript, programming, Linux">
<meta name="description" content="This part of the JavaScript GTK tutorial covers GTK widgets.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Widgets</h1>

<p>
In this part of the JavaScript GTK programming tutorial, 
we will introduce some widgets.
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
Widgets are basic building blocks of a GUI application. Over the years, 
several widgets became a standard in all toolkits on all OS platforms. 
For example a button, a check box or a scroll bar. 
The GTK toolkit's philosophy is to keep the number of widgets at a minimum level. 
More specialized widgets are created as custom GTK widgets.  
</p>


<h2>CheckButton</h2>

<p>
<b>CheckButton</b> is a widget, that has two states. On and Off. 
The On state is visualized by a check mark. It is used to denote some boolean
property.
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This program toggles the title of the
window with the CheckButton widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;


Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
      
        init_ui(this);
        
        function init_ui(w) {
        
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Check button");
            w.set_position(Gtk.WindowPosition.CENTER);

            var fix = new Gtk.Fixed();
                  
            var cb = new Gtk.CheckButton.with_label("Show title");
            cb.set_active(true);
            cb.set_can_focus(false);
            cb.signal.clicked.connect(on_clicked);

            fix.put(cb, 50, 50);

            w.add(fix);
            w.show_all();
            
            function on_clicked(w) {           

              if (w.get_active()) {
                  window.set_title("Check Button");
              } else {
                  window.set_title("");
              }                   
            }    
        }
    }
});

var window = new Example();
Gtk.main();
</pre>

<p>
We will display a title in the titlebar of the window,
depending on the state of the <b>CheckButton</b>. 
</p>

<pre class="explanation">
var cb = new Gtk.CheckButton.with_label("Show title");
</pre>

<p>
<b>CheckButton</b> widget is created. The constructor of the widget
takes one parameter, a label. The label is shown next to the check box.
</p>

<pre class="explanation">
cb.set_active(true);
</pre>

<p>
The title is visible by default, so we check the check button by default. 
</p>

<pre class="explanation">
cb.signal.clicked.connect(on_clicked);
</pre>

<p>
If we click on the check box widget a clicked signal is emitted. We hook
the on_clicked() method to the signal. 
</p>

<pre class="explanation">
if (w.get_active()) {
    window.set_title("Check Button");
} else {
    window.set_title("");
}  
</pre>

<p>
We show the title, if the button is checked. The <b>get_active()</b> 
method is used to determine the state of the check button. The
<b>set_title()</b> method is used to set the title of the window. 
To clear the title of the window, we use an empty string. 
</p>

<img src="/img/gui/jsgtk/checkbutton.png" alt="CheckButton">
<div class="figure">Figure: CheckButton</div>


<h2>Label</h2>

<p>
The <b>Label</b> widget shows text. No user interaction is 
available with this widget. 
</p>


<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates the Label widget

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);


var lyrics = "Meet you downstairs in the bar and heard\n\
your rolled up sleeves and your skull t-shirt\n\
You say why did you do it with him today?\n\
and sniff me out like I was Tanqueray\n\
\n\
cause you're my fella, my guy\n\
hand me your stella and fly\n\
by the time I'm out the door\n\
you tear men down like Roger Moore\n\
\n\
I cheated myself\n\
like I knew I would\n\
I told ya, I was trouble\n\
you know that I'm no good";


Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {

        init_ui(this);
        
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("You know I'm no Good");
            w.set_position(Gtk.WindowPosition.CENTER);
          
            w.set_border_width(10);
            var label = new Gtk.Label.c_new(lyrics);            
            w.add(label);        

            w.show_all();
        }
    }    
});


var window = new Example();
Gtk.main();
</pre>

<p>
The code example shows some lyrics on the window. 
</p>

<pre class="explanation">
var lyrics = "Meet you downstairs in the bar and heard\n\
your rolled up sleeves and your skull t-shirt\n\
</pre>

<p>
We create a multi-line text. In JavaScript, a multi-line text 
consists of lines of text ended with a newline character and a 
backslash. The backslash enables a string in JavaScript to span multiple source
code lines. The newline character displays the string in more lines. 
</p>

<pre class="explanation">
w.set_border_width(10);
</pre>

<p>
The <b>Label</b> is surrounded by some empty space. 
</p>

<pre class="explanation">
var label = new Gtk.Label.c_new(lyrics);            
w.add(label); 
</pre>

<p>
The <b>Label</b> widget is created and added to the window. 
</p>

<img src="/img/gui/jsgtk/label.png" alt="Label Widget">
<div class="figure">Figure: Label Widget</div>



<h2>Entry</h2>

<p>
The <b>Entry</b> is a single line text entry field. This widget 
is used to enter textual data. 
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates the Entry widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/


Gtk = imports.gi.Gtk;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {
      
        init_ui(this);
        
        function init_ui(w) {

            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Entry");
            w.set_position(Gtk.WindowPosition.CENTER);
          
            var fixed = new Gtk.Fixed();

            var label = new Gtk.Label.c_new("...");
            fixed.put(label, 60, 40);

            var entry = new Gtk.Entry();
            fixed.put(entry, 60, 100);

            entry.signal.key_release_event.connect(function(sender) {  
                label.set_text(sender.text);     
            });
            
            w.add(fixed);
            w.show_all();         
        }
    }    
});


var window = new Example();
Gtk.main();
</pre>

<p>
This example shows an entry widget and a label. The text that we key in the 
entry is displayed immediately in the label widget. 
</p>

<pre class="explanation">
var entry = new Gtk.Entry();
</pre>

<p>
<b>Entry</b> widget is created. 
</p>

<pre class="explanation">
entry.signal.key_release_event.connect(function(sender) {  
    label.set_text(sender.text);     
});
</pre>

<p>
We plug the an anonymous method to the <b>key_release_event</b> of the 
<b>Entry</b> widget. We get the text from the Entry widget via the 
<b>text</b> property and set it to the label. 
</p>

<img src="/img/gui/jsgtk/entry.png" alt="Entry Widget">
<div class="figure">Figure: Entry Widget</div>


<h2>Image</h2>

<p>
The <b>Image</b> widget shows an image.
</p>

<pre class="code">
#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates the Image widget.

author: Jan Bodnar
website: www.zetcode.com
last modified: August 2011
*/

Gtk = imports.gi.Gtk;

Gtk.init(null, null);


Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function()
    {

        init_ui(this);
        
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("You know I'm no Good");
            w.set_position(Gtk.WindowPosition.CENTER);
          
            w.set_border_width(2);
            
            try {
              
                var image = new Gtk.Image.from_file("redrock.png");
            } catch(e) {
            
                print("Cannot load image.");
            }
            
            w.add(image);        
            w.show_all();
        }
    }    
});


var window = new Example();
Gtk.main();
</pre>

<p>
In our example, we show an image on the window. 
</p>

<pre class="explanation">
w.set_border_width(2);
</pre>

<p>
We put some empty border around the image. 
</p>

<pre class="explanation">
try {
  
    var image = new Gtk.Image.from_file("redrock.png");
} catch(e) {

    print("Cannot load image.");
}
</pre>

<p>
The <b>Image</b> widget is created. IO operations are error prone, so
we handle the possible exceptions.
</p>

<pre class="explanation">
w.add(image); 
</pre>

<p>
Widget is added to the container.
</p>

<img src="/img/gui/jsgtk/image.jpg" alt="Image widget">
<div class="figure">Figure: Image widget</div>

<p>
In this chapter of the JavaScript GTK tutorial, we showed some basic widgets.
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified August 1, 2011  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

